<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .item {
      display: inline-block;
      width: 40px;
      height: 40px;
      background-color: bisque;
      border: 1px solid rgb(182, 182, 182);
      text-align: center;
      line-height: 40px;
    }

    .blue {
      background-color: rgb(179, 179, 255);
    }

    .red {
      background-color: rgb(255, 96, 96);
    }

    .green {
      background-color: rgb(154, 255, 154);
    }

    #msg {
      width: 300px;
      position: absolute;
      right: 0;
      top: 0px;
      height: 500px;
      overflow-y: scroll;
    }
  </style>
</head>

<body>


  <div id="box">
    <div>
      行列数:<input type="number" id="row" value=8 /><input type="number" id="col" value=8 />
    </div>
    <div>
      临界值:<input type="number" id="threshold" value=3 />
    </div>
    <div>
      速度:<input type="number" id="speed" value=5 />
    </div>
    <div>
      <button onclick="run()">运行</button>
    </div>
  </div>

  <div id="msg">

  </div>


  <script>

    speed = 1;
    function run() {
      const rows = document.getElementById('row').value;
      const cols = document.getElementById('col').value;
      const threshold = document.getElementById('threshold').value;
      speed = document.getElementById('speed').value;
      movingCount(threshold, rows, cols);
    }


    let count = 0;
    function movingCount(threshold, rows, cols) {
      const flag = createArray(rows, cols);
      movingCountCore(0, 0, threshold, rows, cols, flag);
    }

    async function movingCountCore(i, j, threshold, rows, cols, flag) {
      s = 2000 / speed;
      if (i < 0 || j < 0 || i >= rows || j >= cols) {
        msg(`${i},${j}超出范围！`)
        return 0;
      }
      if (flag[i][j]) {
        msg(`${i},${j}已经走过了`)
        return 0;
      }
      const current = document.getElementById(`id${i}${j}`);
      current.classList.add('blue');
      current.innerHTML = '🤪';
      msg(`🤪${i},${j}现在的位置，正在判断...`)
      msg('当前位置')
      await sleep(s);
      if (condition(i, j, threshold)) {
        current.classList.add('red');
        current.innerHTML = '🍏';
        msg(`🍏${i},${j}不能到达！`)
        await sleep(s);
        flag[i][j] = true;
        return 0;
      }
      msg(`🍔${i},${j}可以到达！`)
      current.classList.add('green');
      current.innerHTML = '🍔';
      await sleep(s);
      flag[i][j] = true;
      await movingCountCore(i - 1, j, threshold, rows, cols, flag)
      await movingCountCore(i + 1, j, threshold, rows, cols, flag)
      await movingCountCore(i, j - 1, threshold, rows, cols, flag)
      await movingCountCore(i, j + 1, threshold, rows, cols, flag)
    }

    /**
     * 判断是否符合条件
     */
    function condition(i, j, threshold) {
      let temp = i + '' + j;
      let sum = 0;
      for (var i = 0; i < temp.length; i++) {
        sum += temp.charAt(i) / 1;
      }
      return sum > threshold;
    }

    /**
     * 创建一个二维空数组
     */
    function createArray(rows, cols) {
      const result = new Array(rows) || [];
      const box = document.getElementById('box')
      box.innerHTML = ''
      for (let i = 0; i < rows; i++) {
        const arr = new Array(cols);
        const container = document.createElement('div');
        for (let j = 0; j < cols; j++) {
          const item = document.createElement('div');
          item.id = "id" + i + j;
          item.classList.add('item');
          item.innerHTML = '🍋';
          container.appendChild(item);
          arr[j] = false;
        }
        box.appendChild(container);
        result[i] = arr;
      }
      return result;
    }

    function sleep(time) {
      return new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve();
        }, time);
      })
    };

    function msg(msg) {
      var msgDiv = document.getElementById('msg');
      msgDiv.innerHTML += `<div>${msg}</div>`
    }

    // movingCount(3, 30, 30);
    // console.log(movingCount(5, 8, 8));

  </script>
</body>

</html>